<template>
	<view class="search-box">
		<gy-search @Toclick="goto()"></gy-search>
	</view>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item ,i) in swipperList" :key="i">
				<view class="swipper_item">
					<image class="image" :src="item.url"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="nav-item">
			<view data-info="1" class="nav-item-content">
				<image src="/static/icons/全球跨境.png"></image>
				<view>跨境</view>
			</view>
			<view data-info="2" class="nav-item-content">
				<image src="/static/icons/卖家店铺.png"></image>
				<view>店铺</view>
			</view>
			<view data-info="3" class="nav-item-content">
				<image src="/static/icons/公益.png"></image>
				<view>公益</view>
			</view>
			<view data-info="4" class="nav-item-content">
				<image src="/static/icons/网络.png"></image>
				<view>网络</view>
			</view>
		</view>
		<view class="header-ofchoth">
			<view class="header-cloth-first">
				时尚衣装
			</view>
			<view class="header-cloth-second">
				FASHION CLOTH
			</view>
		</view>
		<view class="floor">
			<view @click="()=>{navigator_to(floor_1_title[0].navigatorUrl)}" class="floor-left">
				<image :src="floor_1_title[0].url" mode="widthFix" />
			</view>
			<view class="floor-right">
				<view @click="()=>{navigator_to(item.navigatorUrl)}" v-for="(item,i) in floor_1" :key="i">
					<image :src="item.url" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="header-ofsport">
			<view class="header-sport-first">
				户外运动
			</view>
			<view class="header-sport-second">
				OUTDOOR SPORTS
			</view>
		</view>
		<view class="floor">
			<view @click="()=>{navigator_to(floor_2_title[0].navigatorUrl)}" class="floor-left">
				<image :src="floor_2_title[0].url" mode="widthFix" />
			</view>
			<view class="floor-right_2">
				<view @click="()=>{navigator_to(item.navigatorUrl)}"
					:class="{special:item.index === 2 || item.index === 5}" v-for="(item,i) in floor_2" :key="i">
					<image class="image_bigger" v-if="item.index === 2 || item.index === 5" :src="item.url"
						mode="widthFix"></image>
					<image v-else :src="item.url" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="header-ofderecatoion">
			<view class="header-derecatoion-first">
				背包外饰
			</view>
			<view class="header-derecatoion-second">
				BACKPACK EXTRIOR DERECTION
			</view>
		</view>
		<view class="floor">
			<view @click="()=>{navigator_to(floor_3_title[0].navigatorUrl)}" class="floor-left">
				<image :src="floor_3_title[0].url" mode="widthFix" />
			</view>
			<view class="floor-right_2">
				<view @click="()=>{navigator_to(item.navigatorUrl)}"
					:class="{special:item.index === 2 || item.index === 5}" v-for="(item,i) in floor_3" :key="i">
					<image class="image_bigger" v-if="item.index === 2 || item.index === 5" :src="item.url"
						mode="widthFix"></image>
					<image v-else :src="item.url" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import mixin from '@/mixins/tabbar-badge.js'
	export default {
		mixins:[mixin],
		data() {
			return {
				swipperList: [],
				floorList: [],
				floor_1: [],
				floor_2: [],
				floor_3: [],
				floor_1_title: null,
				floor_2_title: null,
				floor_3_title: null
			};
		},
		onLoad() {
			this.getSwipper()
			this.getFloorImage()
		},
		methods: {
			goto() {
				uni.navigateTo({
					url: '/subpackage/search/search'
				})
			},
			navigator_to(item) {
				console.log(item)
				const url = '/subpackage/goods/goods?' + item.split("?")[1]
				console.log(url)
				wx.navigateTo({
					url
				})
			},
			// getNode(event) {
			// 	console.log(event.currentTarget.dataset.info)
			// 	const id = event.currentTarget.dataset.info
			// 	if (id === 1) {
			// 		wx.navigateTo('')
			// 	}
			// },
			async getFloorImage() {
				const res = await uni.$http.get('http://192.168.1.11:8080/api/get/images', {
					type: 'shop'
				}, {
					header: {
						token: 'weixin'
					}
				})
				this.floorList = res.data
				console.log(this.floorList)
				//处理一层数据
				const floorlist = res.data.result
				this.floor_1 = floorlist.filter(item => {
					if (item.floor === 1 && item.index !== 1) {
						return true
					}
				})
				this.floor_1_title = floorlist.filter(item => {
					if (item.floor === 1 && item.index === 1) {
						return true
					}
				})
				// console.log(this.floor_1_title)
				// console.log(this.floor_1)
				//处理二层数据
				this.floor_2 = floorlist.filter(item => {
					if (item.floor === 2 && item.index !== 1) {
						return true;
					}
				})
				this.floor_2_title = floorlist.filter(item => {
					if (item.floor === 2 && item.index === 1) {
						return true
					}
				})
				// console.log(this.floor_2_title)
				// console.log(this.floor_2)
				//处理三层数据
				this.floor_3 = floorlist.filter(item => {
					if (item.floor === 3 && item.index !== 1) {
						return true;
					}
				})
				this.floor_3_title = floorlist.filter(item => {
					if (item.floor === 3 && item.index === 1) {
						return true
					}
				})
				// console.log(this.floor_3_title)
				// console.log(this.floor_3)
			},
			async getSwipper() {
				const res = await uni.$http.get('http://192.168.1.11:8080/api/get/swiper', {}, {
					header: {
						token: 'weixin'
					}
				})
				if (res.statusCode !== 200) {
					return uni.$showMsg('请求错误', 1300)
				}
				this.swipperList = res.data.result
				uni.$showMsg('数据请求成功', 3000)
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		position: sticky;
		top: 0px;
		z-index: 999;
		background-color: #C00000;
	}

	.nav-item {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20px; // 移除顶部间距

		.nav-item-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		image {
			width: 128rpx;
			height: 140rpx;
		}
	}

	swiper {
		height: 330rpx;
	}

	.swipper_item {
		width: 100%;
		height: 100%;
	}

	.image {
		width: 100%;
		height: 100%;
	}

	.nav-item-content:hover {
		background-color: rgb(177, 164, 160)
	}

	.header-cloth-first {
		font-family: 'CustomFont', sans-serif;
		font-size: 50rpx;
		/* 根据需要调整字体大小 */
		font-weight: bold;
		/* 设置字体粗细 */

		background: linear-gradient(to right, #ff70a6, #e03997);
		/* 设置渐变背景 */
		-webkit-background-clip: text;
		/* 使背景仅填充文字 */
		-webkit-text-fill-color: transparent;
		/* 使文字颜色透明，显示背景 */
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		/* 添加阴影效果 */
		margin-left: 20rpx;
	}

	.header-ofchoth {
		margin-top: 20rpx;
	}

	.header-cloth-second {
		font-family: 'CustomFont', sans-serif;
		font-size: 20rpx;
		/* 根据需要调整字体大小 */
		font-weight: normal;
		/* 设置字体粗细 */

		text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
		/* 添加阴影效果 */
		margin-left: 20rpx;
	}

	//
	.header-sport-first {
		font-family: 'CustomFont', sans-serif;
		font-size: 50rpx;
		/* 根据需要调整字体大小 */
		font-weight: bold;
		/* 设置字体粗细 */

		background: linear-gradient(to right, #0ae7ff, #00aaff);
		/* 设置渐变背景 */
		-webkit-background-clip: text;
		/* 使背景仅填充文字 */
		-webkit-text-fill-color: transparent;
		/* 使文字颜色透明，显示背景 */
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		/* 添加阴影效果 */
		margin-left: 20rpx;
	}

	.header-ofsport {
		margin-top: 20rpx;
	}

	.header-sport-second {
		font-family: 'CustomFont', sans-serif;
		font-size: 20rpx;
		/* 根据需要调整字体大小 */
		font-weight: normal;
		/* 设置字体粗细 */
		color: #333;
		/* 设置字体颜色 */
		text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
		/* 添加阴影效果 */
		margin-left: 20rpx;
	}

	//
	.header-ofderecatoion {
		margin-top: 20rpx;
	}

	.header-derecatoion-first {
		font-family: 'CustomFont', sans-serif;
		font-size: 50rpx;
		/* 根据需要调整字体大小 */
		font-weight: bold;
		/* 设置字体粗细 */
		background: linear-gradient(to right, #ffff7f, #ffd70f);
		/* 设置渐变背景 */
		-webkit-background-clip: text;
		/* 使背景仅填充文字 */
		-webkit-text-fill-color: transparent;
		/* 使文字颜色透明，显示背景 */
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		/* 添加阴影效果 */
		margin-left: 20rpx;
	}

	.header-derecatoion-second {
		font-family: 'CustomFont', sans-serif;
		font-size: 20rpx;
		/* 根据需要调整字体大小 */
		font-weight: normal;
		/* 设置字体粗细 */
		color: #333;
		/* 设置字体颜色 */
		text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
		/* 添加阴影效果 */
		margin-left: 20rpx;
	}

	.floor {
		display: flex;
		justify-content: left;
		align-items: center;
		height: 500rpx;
		width: 100%;
		margin-left: 8px;

		.floor-left {
			width: 120px;

			image {
				width: 120px;
				border-radius: 10px;
			}

			translate: 0px -10px;
		}

		.floor-right_2 {
			width: 600rpx;
			height: 240px;
			display: flex;
			flex-wrap: wrap;

			.special {
				width: 273rpx;
				margin-left: 5px;
			}

			.image_bigger {
				width: 273rpx;

			}

			view {
				width: 193rpx;
				margin-left: 5px;
			}

			image {
				width: 193rpx;
			}
		}

		.floor-right {
			width: 600rpx;
			height: 240px;
			display: flex;
			flex-wrap: wrap;

			view {
				width: 232rpx;
				margin-left: 5px;

			}

			image {
				width: 232rpx;
			}
		}
	}
</style>